import React, { useEffect, useState } from "react";
import styles from "./index.module.css";
import { BellOutline } from "antd-mobile-icons";
import { Badge, Card, SearchBar } from "antd-mobile";
import { Tabs, Image } from "react-vant";
import http from "../../api/http";
import { useNavigate } from "react-router-dom";
import { HeartFill } from "antd-mobile-icons";
function Index() {
  const navigate = useNavigate();
  const [list, setlist] = useState([]);
  const [collect, setCollect] = useState(
    JSON.parse(localStorage.getItem("collect")) || []
  );
  const getlist = async () => {
    const res = await http.get("/api/list");
    const { data } = res.data;
    console.log(data);
    setlist(data);
  };
  useEffect(() => {
    getlist();
  }, []);

  const handleToList = () => {
    navigate("/list");
  };

  const handleToCity = () => {
    navigate("/city");
  };

  const handleTodeitle = (id) => {
    navigate(`/deitle/${id}`);
  };

  const handleToCollect = (item) => {
    const xin = collect.some((it) => it.id === item.id);
    if (xin) {
      const aa = collect.filter((it) => it.id !== item.id);
      setCollect(aa);
      localStorage.setItem("collect", JSON.stringify(aa));
    } else {
      setCollect([...collect, item]);
      localStorage.setItem(JSON.stringify([...collect, item]));
    }
  };
  return (
    <div>
      <div className={styles.hometop}>
        <span>你的位置</span>
        <p onClick={() => handleToCity()}>
          <b>杭州市,浙江省</b>
        </p>
      </div>

      <p className={styles.timeicon}>
        <Badge content={Badge.dot}>
          <BellOutline />
        </Badge>
      </p>

      <div className={styles.search}>
        <SearchBar placeholder="请输入内容" />
      </div>

      <Tabs border type="capsule">
        <Tabs.TabPane key="tabs1" title="全部">
          <Card
            title="即将展开"
            extra={
              <a style={{ color: "#ccc" }} onClick={() => handleToList()}>
                查看所有
              </a>
            }
            style={{
              background: "#e7e2e2ff",
              borderRadius: "10px",
              overflow: "hidden",
              marginRight: "10px",
            }}
          >
            <div>
              <Card
                style={{
                  borderRadius: "10px",
                  width: "100%",
                  background: "#fff",
                  marginRight: "20px",
                }}
              >
                {list?.map((item, ind) => (
                  <div key={ind}>
                    <div>
                      <Image
                        width="200"
                        height="200"
                        src={item.image}
                        className="listitem"
                        onClick={() => handleTodeitle(item.id)}
                        style={{ background: "#ccc", marginRight: "10px" }}
                      />
                      <HeartFill
                        style={{ fontSize: "26px" }}
                        onClick={() => handleToCollect(item)}
                        color={
                          collect.some((it) => it.id === item.id)
                            ? "red"
                            : "#ccc"
                        }
                      />
                    </div>
                  </div>
                ))}
              </Card>
            </div>
          </Card>
        </Tabs.TabPane>
        <Tabs.TabPane key="tabs2" title="音乐会"></Tabs.TabPane>
        <Tabs.TabPane key="tabs3" title="研讨会"></Tabs.TabPane>
        <Tabs.TabPane key="tabs4" title="剧院"></Tabs.TabPane>
      </Tabs>
    </div>
  );
}

export default Index;
